<template>
  <div class="export-example">
    <el-card>
      <div slot="header">
        <span>数据导出工具演示</span>
      </div>

      <div class="demo-section">
        <h3>示例 1: 基础 Excel 导出</h3>
        <el-button type="primary" @click="exportBasicExcel">导出用户列表 (Excel)</el-button>
      </div>

      <div class="demo-section">
        <h3>示例 2: 带格式化的导出</h3>
        <el-button type="success" @click="exportFormattedExcel">导出订单数据 (Excel)</el-button>
      </div>

      <div class="demo-section">
        <h3>示例 3: CSV 导出</h3>
        <el-button type="warning" @click="exportCSV">导出商品列表 (CSV)</el-button>
      </div>

      <div class="demo-section">
        <h3>示例 4: 处理长数字</h3>
        <el-button type="info" @click="exportLongNumbers">导出用户信息 (处理长数字)</el-button>
      </div>

      <div class="demo-section">
        <h3>示例 5: 使用 ConfigurableTable 列配置导出 ⭐️ 推荐</h3>
        <p style="color: #909399; font-size: 14px; margin-bottom: 10px;">
          直接复用表格组件的列配置，无需重复定义导出列
        </p>
        <el-button type="primary" @click="exportFromTableColumns">导出订单列表 (使用表格配置)</el-button>

        <!-- 预览表格 -->
        <configurable-table
          :columns="orderTableColumns"
          :data="orderTableData"
          border
          stripe
          style="margin-top: 15px;">
          <!-- 状态列 -->
          <template #status="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>

          <!-- 操作列 -->
          <template #actions>
            <el-button size="mini" type="text">查看</el-button>
          </template>
        </configurable-table>
      </div>

      <div class="demo-section">
        <h3>当前数据预览</h3>
        <el-table :data="previewData" border style="margin-top: 20px;">
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="amount" label="金额(分)" width="120"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { exportData, exportToExcel, exportToCSV, formatAmount, formatDateTime, convertTableColumnsToExport } from '@/utils/export'
import ConfigurableTable from '@/components/ConfigurableTable'

export default {
  name: 'ExportExample',
  components: {
    ConfigurableTable
  },
  data() {
    return {
      previewData: [
        {
          id: '1234567890123456789',
          name: '张三',
          amount: 15000,
          createTime: '2024-01-01T10:30:00'
        },
        {
          id: '9876543210987654321',
          name: '李四',
          amount: 25000,
          createTime: '2024-01-02T14:20:00'
        },
        {
          id: '1111222233334444555',
          name: '王五',
          amount: 30000,
          createTime: '2024-01-03T16:45:00'
        }
      ],
      // ConfigurableTable 的列配置
      orderTableColumns: [
        {
          prop: 'orderNo',
          label: '订单号',
          minWidth: 180
        },
        {
          prop: 'customerName',
          label: '客户名称',
          minWidth: 120
        },
        {
          prop: 'amount',
          label: '订单金额',
          minWidth: 120,
          align: 'right',
          formatter: (row, column, cellValue) => {
            return `¥${formatAmount(cellValue)}`
          }
        },
        {
          prop: 'status',
          label: '订单状态',
          minWidth: 100,
          slot: 'status'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          minWidth: 160,
          formatter: (row, column, cellValue) => {
            return formatDateTime(cellValue)
          }
        },
        {
          prop: 'actions',
          label: '操作',
          width: 150,
          fixed: 'right',
          slot: 'actions'
        }
      ],
      // 表格数据
      orderTableData: [
        {
          orderNo: '202401010001',
          customerName: '张三',
          amount: 15000,
          status: 1,
          createTime: '2024-01-01T10:30:00'
        },
        {
          orderNo: '202401010002',
          customerName: '李四',
          amount: 25000,
          status: 0,
          createTime: '2024-01-02T14:20:00'
        },
        {
          orderNo: '202401010003',
          customerName: '王五',
          amount: 30000,
          status: -1,
          createTime: '2024-01-03T16:45:00'
        }
      ]
    }
  },
  methods: {
    // 示例 1: 基础导出
    exportBasicExcel() {
      const users = [
        { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
        { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
        { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' }
      ]

      const columns = [
        { label: 'ID', key: 'id', width: 10 },
        { label: '姓名', key: 'name', width: 15 },
        { label: '年龄', key: 'age', width: 10 },
        { label: '邮箱', key: 'email', width: 25 }
      ]

      try {
        exportToExcel(users, columns, '用户列表', '用户数据')
        this.$message.success('导出成功！')
      } catch (error) {
        this.$message.error('导出失败：' + error.message)
      }
    },

    // 示例 2: 带格式化的导出
    exportFormattedExcel() {
      const orders = [
        {
          id: '202401010001',
          customerName: '张三',
          amount: 15000,
          status: 1,
          createTime: '2024-01-01T10:30:00'
        },
        {
          id: '202401010002',
          customerName: '李四',
          amount: 25000,
          status: 0,
          createTime: '2024-01-01T11:45:00'
        },
        {
          id: '202401010003',
          customerName: '王五',
          amount: 30000,
          status: -1,
          createTime: '2024-01-01T15:20:00'
        }
      ]

      const statusMap = {
        '-1': '已取消',
        '0': '待支付',
        '1': '已支付'
      }

      const columns = [
        { label: '订单号', key: 'id', width: 20 },
        { label: '客户名称', key: 'customerName', width: 15 },
        {
          label: '订单金额（元）',
          key: 'amount',
          width: 15,
          format: (value) => formatAmount(value)
        },
        {
          label: '订单状态',
          key: 'status',
          width: 12,
          format: (value) => statusMap[value] || '未知'
        },
        {
          label: '创建时间',
          key: 'createTime',
          width: 20,
          format: (value) => formatDateTime(value)
        }
      ]

      try {
        exportData('excel', orders, columns, '订单列表', {
          sheetName: '订单数据',
          textColumns: [0]
        })
        this.$message.success('导出成功！')
      } catch (error) {
        this.$message.error('导出失败：' + error.message)
      }
    },

    // 示例 3: CSV 导出
    exportCSV() {
      const products = [
        { sku: 'P001', name: '商品A', price: 9999, stock: 100 },
        { sku: 'P002', name: '商品B', price: 19999, stock: 50 },
        { sku: 'P003', name: '商品C', price: 29999, stock: 30 }
      ]

      const columns = [
        { label: 'SKU', key: 'sku' },
        { label: '商品名称', key: 'name' },
        {
          label: '价格（元）',
          key: 'price',
          format: (value) => formatAmount(value)
        },
        { label: '库存', key: 'stock' }
      ]

      try {
        exportToCSV(products, columns, '商品列表', {
          withBOM: true
        })
        this.$message.success('导出成功！')
      } catch (error) {
        this.$message.error('导出失败：' + error.message)
      }
    },

    // 示例 4: 处理长数字
    exportLongNumbers() {
      const users = [
        {
          id: '1234567890123456789',
          idCard: '110101199001011234',
          name: '张三',
          phone: '13800138000',
          amount: 50000
        },
        {
          id: '9876543210987654321',
          idCard: '110101199002022345',
          name: '李四',
          phone: '13900139000',
          amount: 80000
        }
      ]

      const columns = [
        { label: '用户ID', key: 'id', width: 25 },
        { label: '身份证号', key: 'idCard', width: 20 },
        { label: '姓名', key: 'name', width: 15 },
        { label: '手机号', key: 'phone', width: 15 },
        {
          label: '账户余额',
          key: 'amount',
          width: 15,
          format: (value) => formatAmount(value)
        }
      ]

      try {
        exportToExcel(users, columns, '用户信息', '用户数据', {
          textColumns: [0, 1, 3]  // ID、身份证号、手机号设置为文本
        })
        this.$message.success('导出成功！长数字已正确处理为文本格式')
      } catch (error) {
        this.$message.error('导出失败：' + error.message)
      }
    },

    // 示例 5: 使用 ConfigurableTable 列配置导出 ⭐️ 推荐方式
    exportFromTableColumns() {
      try {
        // 使用适配器函数，将表格列配置转换为导出列配置
        const exportColumns = convertTableColumnsToExport(
          this.orderTableColumns,
          {
            // 为使用了 slot 的列提供格式化函数
            status: (value) => this.getStatusText(value)
          },
          {
            // 排除操作列
            excludeProps: ['actions']
          }
        )

        console.log('转换后的导出列配置:', exportColumns)

        // 直接使用表格数据导出
        exportData(
          'excel',
          this.orderTableData,
          exportColumns,
          '订单列表',
          {
            sheetName: '订单数据',
            textColumns: [0] // 订单号设置为文本格式
          }
        )

        this.$message.success('导出成功！使用表格配置自动生成导出列')
      } catch (error) {
        this.$message.error('导出失败：' + error.message)
      }
    },

    // 状态相关方法
    getStatusText(status) {
      const statusMap = {
        '-1': '已取消',
        '0': '待支付',
        '1': '已支付'
      }
      return statusMap[status] || '未知'
    },

    getStatusType(status) {
      const typeMap = {
        '-1': 'info',
        '0': 'warning',
        '1': 'success'
      }
      return typeMap[status] || 'info'
    }
  }
}
</script>

<style scoped>
.export-example {
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.demo-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.demo-section .el-button {
  margin-right: 10px;
}
</style>

